'use client';

import { ContainerEnv } from '../../config/devcontainer';
import { Radio, Card, Tooltip } from 'antd';
import { 
  CodeOutlined, 
  ExperimentOutlined, 
  RocketOutlined 
} from '@ant-design/icons';

interface EnvSelectorProps {
  value: ContainerEnv;
  onChange: (env: ContainerEnv) => void;
}

const ENV_DESCRIPTIONS = {
  dev: {
    title: '开发环境',
    icon: <CodeOutlined />,
    description: '完整的开发工具链、IDE支持、调试工具',
    features: [
      '完整的Rust工具链',
      'IDE集成支持',
      '开发调试工具',
      '热重载支持'
    ]
  },
  test: {
    title: '测试环境',
    icon: <ExperimentOutlined />,
    description: '优化的测试环境，包含必要的测试依赖',
    features: [
      '基础Rust运行时',
      '测试框架支持',
      '性能分析工具',
      '最小化依赖'
    ]
  },
  prod: {
    title: '生产环境',
    icon: <RocketOutlined />,
    description: '精简的生产环境，仅包含运行必需组件',
    features: [
      '最小化运行时',
      '优化的性能配置',
      '安全性加固',
      '自动化部署支持'
    ]
  }
};

export default function EnvSelector({ value, onChange }: EnvSelectorProps) {
  return (
    <div className="space-y-6">
      <Radio.Group 
        value={value} 
        onChange={e => onChange(e.target.value)}
        className="w-full"
        size="large"
      >
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {(Object.entries(ENV_DESCRIPTIONS) as [ContainerEnv, typeof ENV_DESCRIPTIONS.dev][]).map(([env, info]) => (
            <Tooltip 
              key={env}
              title={info.features.join(' • ')}
              placement="bottom"
            >
              <Card
                hoverable
                className={`cursor-pointer transition-all ${
                  value === env 
                    ? 'border-blue-500 shadow-md' 
                    : 'border-gray-200'
                }`}
                onClick={() => onChange(env)}
              >
                <Radio value={env} className="sr-only" />
                <div className="flex items-center space-x-3">
                  <div className={`text-2xl ${
                    value === env ? 'text-blue-500' : 'text-gray-500'
                  }`}>
                    {info.icon}
                  </div>
                  <div>
                    <div className="font-medium text-gray-900">
                      {info.title}
                    </div>
                    <div className="text-sm text-gray-500">
                      {info.description}
                    </div>
                  </div>
                </div>
              </Card>
            </Tooltip>
          ))}
        </div>
      </Radio.Group>
    </div>
  );
} 